<template>
  <div class="signUpInfo">
    <van-nav-bar title="报名信息" left-arrow @click-left="onClickLeft" fixed />
    <div class="main">
      <div class="infoBox" v-for="(item,index) in arr" :key="index">
        <div class="boxTitle">第{{index+1}}位</div>
        <div class="boxContent">
          <div class="row" v-for="(itemn,indexn) in item" :key="indexn">
            <div class="label">
              {{itemn.name}}
              <span v-if="itemn.is_required==1">*</span>
            </div>
            <div>
              <input type="text" :placeholder="'输入'+itemn.name" v-model="arr[index][indexn].value" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="total">合计： ¥{{totalPrice}}</div>
      <div class="btn" @click="signUpMethod">报名</div>
    </div>
    <div v-if="showBind">
      <bindPhone :uid="uid" :activity_id="activity_id"></bindPhone>
    </div>
  </div>
</template>
<script>
export default {
  name: "signUpInfo",
  data() {
    return {
      //根据票的张数确定报名人数
      arr: [],
      arrItem: [],
      //票的张数
      num: 1,
      //总价
      totalPrice: 0,
      activity_id: "",
      special_id: "",
      orderId: "",
      uid: "",
      activity_id: "",
      showBind: false
    };
  },
  mounted() {
    if (this.$route.query.uid) {
      this.uid = this.$route.query.uid;
    }
    if (this.$route.query.activity_id) {
      this.activity_id = this.$route.query.activity_id;
    }
    this.num = this.$route.query.num;
    this.totalPrice = this.$route.query.totalPrice;
    this.activity_id = this.$route.query.activity_id;
    this.special_id = this.$route.query.special_id;

    this.getInfo();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },

    //获取报名所需信息
    async getInfo() {
      let params = {
        token: this.$cookies.get("token"),
        activity_id: this.activity_id
      };
      const res = await this.$axios.post(this.$api.registerInfo, params);
      if (res.code == 1) {
        this.arrItem = res.data.set_array;
        for (let i = 0; i < this.num; i++) {
          let obj = new Array();
          res.data.set_array.forEach((item, index) => {
            let o = Object.assign({}, item);
            obj.push(o);
          });
          this.arr.push(obj);
        }
      } else {
        this.$message({
          message: "获取报名信息失败：" + res.msg,
          type: "error"
        });
      }
    },

    //报名接口
    async signUpMethod() {
      if (this.$cookies.get("first_login")!=0) {
        this.showBind = true;
        return;
      }
      let onoff = false;
      this.arr.forEach((item, index) => {
        item.forEach((i, eq) => {
          if (i.is_required == 1 && !i.value) {
            onoff = true;
          }
        });
      });
      if (onoff) {
        this.$toast("您有必填项未填写");
        return false;
      }
      let params = {
        token: this.$cookies.get("token"),
        activity_id: this.activity_id,
        special_id: this.special_id,
        ticket_info: JSON.stringify(this.arr)
      };
      const res = await this.$axios.post(this.$api.getActivityIn, params);
      if (res.code == 1) {
        this.orderId = res.data.out_trade_no;
        this.$router.push({
          path: "/order",
          query: {
            totalPrice: this.totalPrice,
            orderId: this.orderId,
            uid: this.uid,
            activity_id: this.activity_id
          }
        });
      } else {
        this.$message({
          message: "报名失败：" + res.msg,
          type: "error"
        });
      }
    }
  }
};
</script>
<style scoped>
.signUpInfo {
  padding-top: 0.46rem;
  padding-bottom: 0.5rem;
}
.infoBox {
  margin-top: 0.1rem;
  background: #fff;
  width: 100%;
  padding: 0.15rem;
}
.infoBox .boxTitle {
  /* height:.48rem; */
  display: flex;
  align-items: center;
  border-left: 4px solid #00c6d8;
  padding-left: 0.08rem;
}
.infoBox .boxContent {
  margin-top: 0.18rem;
}
.infoBox .boxContent .row {
  margin-bottom: 0.13rem;
}
.infoBox .boxContent .row .label {
  font-size: 0.12rem;
  color: #010101;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  margin-bottom: 0.07rem;
}
.infoBox .boxContent .row .label span {
  color: #fc0101;
}
.infoBox .boxContent .row input {
  width: 100%;
  height: 0.37rem;
  background: #f3f3f3;
  border: none;
  padding-left: 0.1rem;
}
.footer {
  padding-left: 0.12rem;
  display: flex;
  width: 100%;
  height: 0.5rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}
.footer .total {
  width: 60%;
  display: flex;
  align-items: center;
  font-size: 0.15rem;
  color: #000;
  /* border-top:1px solid #D3D3D3; */
}
.footer .btn {
  width: 40%;
  display: flex;
  align-items: center;
  font-size: 0.17rem;
  color: #fff;
  background: #00c6d8;
  justify-content: center;
}
</style>


